<template>
  <div class="micro-notice-box">
    <div class="design-preview-controller">
      <van-notice-bar
        left-icon="volume-o"
        :mode="formData.mode"
        :text="formData.text || '如果过长，将会在手机上滚动显示'"
        :background="formData.background"
        :color="formData.color"
      />
    </div>

    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <div class="design-config-editor">
        <div class="design-editor-component-title">公告</div>
        <el-form ref="formData" :model="formData" label-width="100px">
          <el-form-item
            label="公告:"
            prop="text"
            :rules="{
              required: true, message: '请填写公告内容', trigger: 'blur'
            }"
          >
            <el-input v-model="formData.text" size="small" placeholder="请填写内容，如果过长，将会在手机上滚动显示" />
          </el-form-item>
          <el-form-item label="通知栏模式:">
            <el-select v-model="formData.mode" placeholder="请选择">
              <el-option key="closeable" label="closeable" value="closeable" />
              <el-option key="link" label="link" value="link" />
            </el-select>
            <el-button class="reColor" @click="formData.mode=''">重置</el-button>
          </el-form-item>
          <el-form-item label="背景颜色:">
            <el-color-picker v-model="formData.background" />
            <el-button class="reColor" @click="formData.background='#fffbe8'">重置</el-button>
          </el-form-item>
          <el-form-item label="文字颜色:">
            <el-color-picker v-model="formData.color" />
            <el-button class="reColor" @click="formData.color='#ed6a0c'">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import index from './index.js'

  export default index
</script>
